import { useEffect } from "react"

const Com = () => {
  var map = new window.BMapGL.Map('container');
  map.centerAndZoom(new window.BMapGL.Point(116.514, 39.915), 10);
  map.enableScrollWheelZoom(true);
  useEffect(() => {
    // var map = new window.BMapGL.Map("container");
    // // 创建地图实例 
    // var point = new window.BMapGL.Point(116.404, 39.915);
    // // 创建点坐标 
    // map.centerAndZoom(point, 15);
    // // 初始化地图，设置中心点坐标和地图级别 

    // var map = new window.BMapGL.Map('container');
    // map.centerAndZoom(new window.BMapGL.Point(116.404, 39.928), 15);
    // map.enableScrollWheelZoom(true);
    // // 创建点标记
    // var marker1 = new window.BMapGL.Marker(new window.BMapGL.Point(116.404, 39.925));
    // var marker2 = new window.BMapGL.Marker(new window.BMapGL.Point(116.404, 39.915));
    // var marker3 = new window.BMapGL.Marker(new window.BMapGL.Point(116.395, 39.935));
    // var marker4 = new window.BMapGL.Marker(new window.BMapGL.Point(116.415, 39.931));
    // // 在地图上添加点标记
    // map.addOverlay(marker1);
    // map.addOverlay(marker2);
    // map.addOverlay(marker3);
    // map.addOverlay(marker4);
  }, [])

  
  const setNewZoom = () => {
    var zoom = document.getElementById('zoominput').value;
    map.setZoom(zoom);
  }
  const  getMapZoom = () => {
    alert(map.getZoom());
  }
  return (
    <div>
      百度地图
      <div class = "info">
        <div>改变地图级别:</div>
        <input id="zoominput" type="number" step="1" min="4" max="20" value="10" />
        <button id="change-btn" onClick={setNewZoom}>设置级别</button>
        <button id="change-btn" onClick={() => {map.zoomIn()}}>放大一级</button>
        <button id="change-btn" onClick={() => {map.zoomOut()}}>缩小一级</button>
        <button id="change-btn" onClick={getMapZoom}>获取当前级别</button>
      </div>
      <div id="container" style={{ width: 500, height: 500}}></div>
    </div>
  )
}
export default Com